<template>
  <div id="pages">
    <navbar></navbar>

    <div class="main-content clearfix">
      <article class="container">
        <div class="article-main">
          <div class="newArticle"><router-link to="index">首页</router-link> > <router-link to="develop">开发</router-link></div>
          <div class="article-box-warpper">
            <div class="article-detail-hd">
              <div class="article-box-heading clearfix">
                <span>转载</span>
                <a>快速软件开发第一部分有效开发完成</a>
                <input id="clone_url" type="text" v-model="url">
                <button type="button" class="clone-btn" data-clipboard-target="#clone_url">复制链接</button>
              </div>
              <div class="author-box clearfix">
                <div class="article-author">
                  <router-link to="personal" class="author-img"><img src="../assets/img/user.jpg"></router-link>
                  <span class="author-name">随心前行的唐子清</span>
                  <span class="author-publish-time">3小时前</span>
                </div>
                <div class="article-details-meta">
                  <a><i class="fa fa-eye fa-lg"></i> 42</a>
                  <a><i class="fa fa-heart-o fa-lg"></i> 2</a>
                  <a href="javascript:void(0)" @click="jump()"> <i class="fa fa-commenting-o fa-lg"></i> 1</a>
                </div>
              </div>
            </div>

            <div class="article-detail-bd">
              <P>在上个世纪的大部分时间里，工人在整个“经济蛋糕”中获得的比例像光速一样恒定。不管经济的组成如何，劳工群体总是能够以工作报酬的形式带走大约三分之二的国家总产值。1939
                年，经济学家约翰·梅纳德·凯恩斯（John Maynard Keynes）宣称，工人的恒定份额是“所有经济统计数据中最令人吃惊、最稳定的元素之一”。</P>
              <P>最近几十年，这种包括总裁奖金和期权、以及停车场服务员的最低工资和小费在内的稳定的劳工工资比例开始松动。2000
                年代，这个比例出现了明显下滑。虽然工资金额在过去几年小幅上涨，但是自从经济衰退以来，劳工的收入比例一直没有突破 59%。</P>
              <P>
                比如说：一个外星人降落地球，看到一个地球人，就偷偷地跟在背后。这是一个不可能事件，但是它的连续情节很可信。但一个正常的地球人看到另外一个陌生的地球人，于是就偷偷跟在背后，这件事情完全可能，但是从情节上没有任何让观众或者读者觉得可信的地方，我们会立即问：为什么？
                我们看到很多糟糕的现实题材电影，吐槽情节的各种牵强，就是来自于这种implausibility，编剧没有聆听亚里士多德的教诲。</P>
              <P></P>
              <P></P>
            </div>

            <div class="article-detail-ft">
              <a class="article-praise">
              <vue-star class="like" color="#F05654">
                <i slot="icon" class="fa fa-heart fa-2x"></i>
              </vue-star>
              </a>
              <p>喜欢就点个赞吧</p>
            </div>

            <div class="article-tag">
              <span>标签</span>
              <a href="#">Android</a>
              <a href="#">Java</a>
            </div>

          </div>

          <div class="related-comments-hd comments" id="comments">
            <div class="items-comments">
              <div class="com-comment clearfix">
                <div class="comment-left">
                  <router-link to="personal" class="user-avatar">
                    <img src="../assets/img/user.jpg">
                  </router-link>
                </div>
                <div class="comment-right">
                  <div class="name-date">
                    <span class="comment-name">白日梦想家</span>
                    <span class="comment-time">3小时前</span>
                  </div>
                  <p class="comment-text">这篇文章很不错，感谢作者分享。</p>
                </div>
              </div>
              <div class="com-comment clearfix">
                <div class="comment-left">
                  <router-link to="personal" class="user-avatar">
                    <img src="../assets/img/user.jpg">
                  </router-link>
                </div>
                <div class="comment-right">
                  <div class="name-date">
                    <span class="comment-name">白日梦想家</span>
                    <span class="comment-time">3小时前</span>
                  </div>
                  <p class="comment-text">这篇文章很不错，感谢作者分享。</p>
                </div>
              </div>
              <div class="com-comment clearfix">
                <div class="comment-left">
                  <router-link to="personal" class="user-avatar">
                    <img src="../assets/img/user.jpg">
                  </router-link>
                </div>
                <div class="comment-right">
                  <div class="name-date">
                    <span class="comment-name">白日梦想家</span>
                    <span class="comment-time">3小时前</span>
                  </div>
                  <p class="comment-text">这篇文章很不错，感谢作者分享。这篇文章很不错，感谢作者分享。这篇文章很不错，感谢作者分享。</p>
                </div>
              </div>
              <div class="com-comment clearfix">
                <div class="comment-left">
                  <router-link to="personal" class="user-avatar">
                    <img src="../assets/img/user.jpg">
                  </router-link>
                </div>
                <div class="comment-right">
                  <div class="name-date">
                    <span class="comment-name">白日梦想家</span>
                    <span class="comment-time">3小时前</span>
                  </div>
                  <p class="comment-text">这篇文章很不错，感谢作者分享。</p>
                </div>
              </div>


            </div>
          </div>

          <div class="related-comments-bd">
            <h4 class="comment-heading">评论</h4>
            <div class="comment-panel">
              <div class="comment-left">
                <router-link to="personal" class="user-avatar">
                  <img src="../assets/img/user.jpg">
                </router-link>
              </div>
              <form action="" class="comment-form">
                <textarea name="content" placeholder="点击参与评论..."></textarea>
                <div class="share-submit clearfix">
                  <a rel="nofollow" href="#" class="btn comment-submit">发表评论</a>
                </div>
              </form>
            </div>
          </div>

        </div>

        <sidebar></sidebar>

      </article>
    </div>
  </div>
</template>

<script>
  import navbar from '../components/nav.vue'
  import sidebar from '../components/aside.vue'
  import '../assets/js/jquery-3.2.0.min'
  import '../assets/js/clipboard.min.js'
  export default {
    name: 'pages',
    components: {
      navbar, sidebar,
    },
    data () {
      return {
        url:'网址',
        index:'',
      }
    },
    methods:{
      jump () {
        let jump = document.getElementById('comments').offsetTop
        let total = jump
        let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
        // 平滑滚动，时长500ms，每10ms一跳，共50跳
        let step = total / 50
        if (total > distance) {
          smoothDown()
        } else {
          let newTotal = distance - total
          step = newTotal / 50
          smoothUp()
        }
        function smoothDown () {
          if (distance < total) {
            distance += step
            document.body.scrollTop = distance
            document.documentElement.scrollTop = distance
            window.pageYOffset = distance
            setTimeout(smoothDown, 10)
          } else {
            document.body.scrollTop = total
            document.documentElement.scrollTop = total
            window.pageYOffset = total
          }
        }
        function smoothUp () {
          if (distance > total) {
            distance -= step
            document.body.scrollTop = distance
            document.documentElement.scrollTop = distance
            window.pageYOffset = distance
            setTimeout(smoothUp, 10)
          } else {
            document.body.scrollTop = total
            document.documentElement.scrollTop = total
            window.pageYOffset = total
          }
        }
      },
      created(){
        this.$http.get('http://172.17.140.113:8360/api/post/id').then(response => {
          if (response.body && response.body.errno != 0) {
            let msg = response.body ? response.body.errmsg : '请求异常！！！'
            console.log(msg)
            return
          }
          try {
            response = response.body.data
            console.dir(response)

          }
          catch(e){
            console.log("error")
          }

        }, response => {
          console.log(response)
        });
      },

    },
    created(){

      var clipboard = new Clipboard(".clone-btn");
      clipboard.on('success', function (e) {
        showTooltip(e.trigger, '复制成功!');
      });

      clipboard.on('error', function (e) {
        console.log(e);
        alert("复制失败");
      });

      let splits = window.location.href;
      this.url = splits


      var btns = document.querySelectorAll('.clone-btn');
      for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener('mouseleave', function (e) {
          e.currentTarget.setAttribute('class', 'clone-btn');
          e.currentTarget.removeAttribute('aria-label');
        });
      }
      function showTooltip(elem, msg) {
        elem.setAttribute('class', 'clone-btn tooltipped tooltipped-s');
        elem.setAttribute('aria-label', msg);
      }
    },
  }

</script>

<style scoped>
  /*文章详情*/

  .main-content {
    margin: 0 auto 40px;
    max-width: 1400px;
    padding: 0 24px;
    position: relative;
  }

  .newArticle {
    margin-top: 52px;
  }

  .newArticle a {
    font-size: 16px;
  }

  .article-main {
    float: left;
    width: calc((100% - 30px) / 3 * 2);
    margin-right: 40px;
  }

  .article-box-warpper {
    width: 100%;
    height: auto;
    padding: 53px;
    margin-top: 20px;
    background: #fff;
  }

  .article-detail-hd {

  }

  .article-box-heading {
    margin-bottom: 16px;
  }

  .article-box-heading span {
    display: inline-block;
    vertical-align: text-bottom;
    background: #febb50;
    color: #fff;
    padding: 3px 6px;
    margin-right: 8px;
    border-radius: 4px;
  }

  .article-box-heading a {
    font-size: 24px;
    line-height: 40px;
  }

  .author-box {

  }

  .article-author {
    width: 50%;
    float: left;
  }

  .author-img {
    width: 32px;
    height: 32px;
    line-height: 32px;
    display: block;
    float: left;
  }

  .author-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .author-name {
    margin-left: 12px;
    line-height: 32px;
    font-size: 16px;
    color: #387aff;
    overflow: hidden;
    float: left;
    max-width: calc(100% - 114px);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .author-publish-time {
    color: #777;
    font-size: 16px;
    line-height: 32px;
    float: left;
    margin-left: 12px;
  }

  .article-details-meta {
    float: right;
    width: 50%;
    text-align: right;
    line-height: 32px;
  }

  .article-details-meta a {
    margin-right: 10px;
    color: #666;
  }

  .article-detail-bd {
    margin-top: 30px;
  }

  .article-detail-bd p {
    color: #666;
    line-height: 36px;
    font-size: 18px;
    font-weight: 300;
  }

  .article-detail-ft {
    width: 100%;
    text-align: center;
    margin-top: 72px;
    position: relative;
  }

  .article-detail-ft p {
    color: #666;
    font-size: 16px;
  }

  .article-praise {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    display: block;
    margin: 10px auto;
    background: #387aff;
  }

  .like {
    position: absolute;
    top: -18px;
    left: 50%;
    margin-left: -50px;
    color: #fff;
    cursor: pointer;
  }

  .related-comments-hd {
    width: 100%;
    height: auto;
    background: #fff;
    margin-top: 20px;
    padding: 40px;
    position: relative;
  }

  .com-comment {
    padding: 40px 0;
    border-bottom: 1px solid #e7e7e7;
  }

  .comment-left {
    display: inline-block;
    vertical-align: top;
  }

  .comment-right {
    position: relative;
    display: inline-block;
    margin-left: 16px;
    width: calc(100% - 70px);
  }

  .name-date {
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
  }

  .comment-name {
    line-height: 40px;
    font-size: 16px;
    color: #444;
    overflow: hidden;
    float: left;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .comment-time {
    color: #777;
    font-weight: 300;
    line-height: 40px;
    float: left;
    margin-left: 19px;
  }

  .comment-text {
    font-size: 16px;
    color: #000;
  }

  .user-avatar {
    width: 48px;
    height: 48px;
    display: block;
    float: left;
  }

  .user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .related-comments-bd {
    margin-top: 20px;
    background: #fff;
    padding: 50px;
  }

  .related-comments-bd h4 {
    font-weight: 600;
    border-left: 3px solid #387aff;
    padding-left: 10px;
    box-sizing: border-box;
  }

  .comment-panel {
    margin-top: 40px;
  }

  .comment-form {
    position: relative;
    display: inline-block;
    margin-left: 16px;
    width: calc(100% - 70px);
  }

  .comment-form textarea {
    padding: 10px;
    max-height: calc(100% - 70px);
    width: 100%;
    height: 120px;
    border: 1px solid #e7e7e7;
    outline: none;
    color: #363636;
    background: #f8f8f8;
    line-height: 18px;
    resize: none;
  }

  .comment-submit {
    float: right;
    width: 123px;
    height: 40px;
    line-height: 40px;
    margin-top: 7px;
    padding: 0;
    background: #387aff;
    color: #fff;
    font-size: 16px;
    text-align: center;
  }

  .article-tag span {
    margin-right: 10px;
    color: #666;
  }

  .article-tag a {
    margin: 0 10px;
    color: #333;
  }

  #clone_url {
    position: absolute;
    opacity: 0;
    width: 1px;
    border: 0;
    z-index: -1;
  }

  .clone-btn {
    float: right;
    outline: none;
    width: 72px;
    height: 30px;
    line-height: 26px;
    margin: 5px 0;
    border: 1px solid #387aff;
    color: #387aff;
    background: #fff;
    box-sizing: border-box;
  }

  .clone-btn:hover {
    color: #fff;
    background: #387aff;
  }

  .tooltipped {
    position: relative
  }

  .tooltipped:after {
    position: absolute;
    z-index: 100;
    display: none;
    padding: 5px 8px;
    font: normal normal 11px/1.5 Helvetica, arial;
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: break-word;
    white-space: pre;
    pointer-events: none;
    content: attr(aria-label);
    background: rgba(0, 0, 0, 0.8);
    border-radius: 3px;
    -webkit-font-smoothing: subpixel-antialiased
  }

  .tooltipped:before {
    position: absolute;
    z-index: 101;
    display: none;
    width: 0;
    height: 0;
    color: rgba(0, 0, 0, 0.8);
    pointer-events: none;
    content: "";
    border: 5px solid transparent
  }

  .tooltipped:hover:before, .tooltipped:hover:after, .tooltipped:active:before, .tooltipped:active:after, .tooltipped:focus:before, .tooltipped:focus:after {
    display: inline-block;
    text-decoration: none
  }

  .tooltipped-s:after {
    top: 100%;
    right: 50%;
    margin-top: 5px;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }

  .tooltipped-s:before {
    top: auto;
    right: 50%;
    bottom: -5px;
    margin-right: -5px;
    border-bottom-color: rgba(0, 0, 0, 0.8);
  }

  @media screen and (max-width: 768px) {
    .main-content {
      margin: 40px auto;
      max-width: 100%;
      padding: 0;
      position: relative;
    }

    .article-main {
      float: left;
      width: calc(100%);
      margin-right: 0;
    }

    .article-box-warpper, .related-comments-hd, .related-comments-bd {
      padding: 20px;
    }

    .article-details-meta {
      display: none;
    }

    .article-author {
      width: 100%;
    }

    .comment-name {
      width: 100px;
    }

    .comment-submit {
      float: right;
      width: 80px;
      height: 30px;
      line-height: 30px;
      margin-top: 7px;
      padding: 0;
      background: #387aff;
      color: #fff;
      font-size: 14px;
      text-align: center;
    }

    .newArticle {
      margin-top: 20px;
    }

    .com-comment {
      padding: 30px 0;
    }
  }
</style>
